<script setup>
	import {
		computed,
		onMounted,
		reactive,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	import {
		getActivityDetailAPI,
		getSessionAPI,
		signActivityAPI,
	} from '@/api/active'
	import {
		useMemberStore
	} from '@/stores'
	const memberStore = useMemberStore()
	// 获取屏幕边界到安全区域距离
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
	// 获取右侧胶囊位置信息
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()

	const IMAGE_URL = computed(() => import.meta.env.VITE_IMAGE_URL)

	/**
	 * 变量
	 */
	const detailObj = ref({})
	const peoples = ref([])
	const selectSession = ref('')
	const sessionList = ref([])
	const popupRef = ref(null)
	const form = reactive({
		acId: '',
		sessionId: '',
		signName: '',
		signPhone: '',
	})

	/**
	 * 方法
	 */
	const signUp = () => {
		popupRef.value.open()
	}
	const inputChange = () => {
		console.log(form)
	}

	const change = () => {
		console.log('change')
	}

	// 获取详情
	const getDetail = async (id) => {
		try {
			const res = await getActivityDetailAPI(id)
			detailObj.value = res.data
			peoples.value = res.data.users
			getSession(id)
		} catch (error) {
			const {
				code,
				msg
			} = error
			if (code != '401') {
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			}
		}
	}

	// 根据活动id获取场次
	const getSession = async (id) => {
		const res = await getSessionAPI(id)
		sessionList.value = res.data || []
	}

	const bindPickerChange = (e, data) => {
		const {
			target: {
				value
			},
		} = e
		console.log(value, data, data[value], '46===')
		selectSession.value = data[value]['session']
		form.sessionId = data[value]['id']
	}

	// 提交报名
	const submitSignUp = async () => {
		if (!form.sessionId)
			return uni.showToast({
				icon: 'none',
				title: '请选择场次'
			})
		await signActivityAPI(form)
		uni.showToast({
			icon: 'none',
			title: '报名成功'
		})
		popupRef.value.close()
	}

	// 打开地图
	const openMap = (address) => {
		// 获取当前位置
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				// 打开内置地图
				uni.openLocation({
					latitude: res.latitude, // 目标位置的纬度，浮点数，范围为90~-90
					longitude: res.longitude, // 目标位置的经度，浮点数，范围为180~-180。
					scale: 18, // 缩放比例，范围5~18
					name: address, // 位置名
					address, // 地址的详细说明
					success() {
						console.log('地图打开成功')
					},
					fail(err) {
						console.error('地图打开失败', err)
					},
				})
			},
			fail(err) {
				console.error('获取位置失败', err)
			},
		})
	}

	onShow(() => {
		//兼容登录完成返回页面重新请求数据 
		if (form?.acId) {
			getDetail(form?.acId)
		}
	})

	onLoad((options) => {
		form.acId = options?.id
		if (options?.acId) {
			getDetail(options?.acId)
		}
	})

	onMounted(() => {
		form.signName = memberStore?.profile?.nickName
		form.signPhone = memberStore?.profile?.phonenumber
	})
</script>

<template>
	<view class="active-detail">
		<view class="header-view">
			<image class="big-bg" :src="`${IMAGE_URL}${detailObj.acCover}`" mode="aspectFill" />
			<view class="small-view">
				<image class="small-bg" :src="`${IMAGE_URL}${detailObj.acCover}`" mode="aspectFill" />
				<view class="title">{{ detailObj.acName }}</view>
			</view>
		</view>
		<view class="detail">
			<view class="date">{{ detailObj.acBegin }}-{{ detailObj.acEnd }}</view>
			<view class="address-view">
				<view class="address">{{ detailObj.acAddress }}</view>
				<view class="address-icon flex-center" @click="openMap(detailObj.acAddress)">
					<image src="../../static/images/active/address.png" mode="aspectFill" />
				</view>
			</view>
			<scroll-view class="info" scroll-y="true">
				<view class="count">已报名{{ peoples.length }}人</view>
				<view class="avatar-box">
					<view class="avatar" v-for="(item, index) in peoples" :key="index">
						<image :src="item.avatar" mode="aspectFill" />
					</view>
				</view>

				<view class="info-v">{{ detailObj.acName }} </view>
				<view class="info-v">活动时间：{{ detailObj.acBegin }}-{{ detailObj.acEnd }}</view>
				<view class="info-v">活动地点：{{ detailObj.acAddress }}</view>
				<view class="info-v">
					<rich-text :nodes="detailObj.acDescrip"></rich-text>
				</view>
			</scroll-view>
		</view>
		<view class="footer flex-center" :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }">
			<view class="share-view">
				<button open-type="share" plain>
					<view class="share flex-center">
						<image src="../../static/images/active/share.png" mode="aspectFill" />
					</view>
					<view class="share-text"> 分享 </view>
				</button>
			</view>
			<view @tap="signUp" class="btn flex-center">报名</view>
		</view>
		<!-- 底部弹窗 -->
		<uni-popup ref="popupRef" type="bottom" background-color="#fff" borderRadius="60rpx 60rpx 0 0" @change="change">
			<view class="popup-content">
				<view class="item">
					<view class="label"> 场次 </view>
					<picker @change="(e) => bindPickerChange(e, sessionList)" range-key="session" :range="sessionList">
						<text v-if="!selectSession" class="input-placeholder">请选择</text>
						<text v-else>{{ selectSession }}</text>
						<image class="arrow" src="../../static/images/active/arrow.png" mode="aspectFill" />
					</picker>
				</view>
				<view class="item">
					<view class="label">姓名</view>
					<input disabled v-model="form.signName" placeholder="请输入您的姓名" placeholder-class="input-placeholder"
						@input="inputChange('signName')" />
				</view>
				<view class="item">
					<view class="label">手机号</view>
					<input disabled v-model="form.signPhone" placeholder="请输入您的手机号"
						placeholder-class="input-placeholder" @input="inputChange('signPhone')" />
				</view>
				<view @tap="submitSignUp" class="btn flex-center item-btn">报名</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.active-detail {
		position: relative;
		height: 100vh;

		.header-view {
			position: relative;
			height: 500rpx;

			.big-bg {
				width: 100%;
				height: 100%;
			}

			.small-view {
				position: absolute;
				z-index: 9;
				top: 100rpx;
				left: 54rpx;
				display: flex;

				.small-bg {
					width: 242rpx;
					height: 342rpx;
					border-radius: 24rpx;
					flex-shrink: 0;
					margin-right: 32rpx;
				}

				.title {
					margin-top: 70rpx;
					width: 320rpx;
					font-size: 34rpx;
					letter-spacing: 0px;
					line-height: 48rpx;
					color: #ffffff;
				}
			}
		}

		.detail {
			position: relative;
			background: #ffffff;
			margin-top: -100rpx;
			padding: 90rpx 52rpx 220rpx;
			border-radius: 90rpx 90rpx 0 0;

			.date {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				margin-bottom: 26rpx;
			}

			.address-view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

				.address {
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
				}

				.address-icon {
					width: 50rpx;
					height: 50rpx;
					border-radius: 6rpx;
					background: #ea5404;

					image {
						width: 36rpx;
						height: 32rpx;
					}
				}
			}

			.info {
				.count {
					color: #ea5404;
					font-size: 32rpx;
					font-weight: 500;
					margin: 26rpx 0 30rpx;
				}

				.avatar-box {
					display: flex;
					justify-content: flex-start;

					.avatar {
						padding-bottom: 40rpx;
						margin-inline-end: 3px;

						image {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							margin-right: 6rpx;
							margin-bottom: 6rpx;
						}
					}
				}

				.info-v {
					color: #000000;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 60rpx;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			padding-top: 20rpx;
			width: 100%;
			background: #ffffff;
			box-shadow: 0px 17rpx 51rpx #f5ede9;
			display: flex;
			align-items: center;
			justify-content: center;

			.share-view {
				margin-right: 70rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				button {
					border: none;
					padding: 0;
					line-height: normal;
				}

				.share {
					width: 64rpx;
					height: 64rpx;
					background: #ea5506;
					border-radius: 50%;
					margin-bottom: 6rpx;

					image {
						width: 38rpx;
						height: 32rpx;
					}
				}

				.share-text {
					font-size: 26rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}

	.input-placeholder {
		color: rgb(145, 145, 145);
	}

	.btn {
		width: 420rpx;
		height: 80rpx;
		border-radius: 10rpx;
		background: #ea5506;
		font-size: 32rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.popup-content {
		padding: 116rpx 56rpx 60rpx;
		box-sizing: border-box;

		.item {
			margin-bottom: 60rpx;
			height: 94rpx;
			border-radius: 8rpx;
			background: #f4f4f4;
			padding: 0 52rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.label {
				flex-shrink: 0;
				width: 180rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}

			.arrow {
				margin-left: 20rpx;
				width: 32rpx;
				height: 20rpx;
			}

			input {
				text-align: right;
				flex: 1;
			}
		}

		.item-btn {
			width: auto;
			margin-top: 120rpx;
		}
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.limit2 {
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		white-space: nowrap;
	}

	.limit3 {
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-clamp: 3;
		white-space: nowrap;
	}
</style>